/* -------------------- Theme Toggle (in Header) -------------------- */

/* Theme toggle button */
.theme-toggle-button {
  width: 38px;
  height: 38px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--standard-border);
  background-color: var(--background-primary);
  box-shadow: var(--shadow-sm);
  transition:
    all 0.2s var(--animation-curve),
    background-color 0.3s ease;
  padding: 0;
  /* Ensure no default padding interferes */
  cursor: pointer;
  /* Add pointer cursor */
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.theme-toggle-button:hover {
  background-color: var(--hover-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-toggle-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.dark-mode .theme-segmented-control {
  border-color: var(--border-color);
}
.dark-mode .theme-segment.active {
  background-color: #3e3e42; /* Darker active background */
}
